<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>key的原理</title>
    <!--    引入Vue-->
    <script src="../../static/js/vue.js"></script>
</head>
<body>
<!--装备好一个容器-->
<div id="root">
    <button @click="addSex">添加性别属性</button>
    <br>
    <button @click="addHobby">更换爱好</button>
    <br>
    <button @click="modifyFirstFriendsAge">修改朋友的年龄</button>
    <ul>
        <li v-for="(item,index) in me" :key="index">
            {{index}}--{{item}}
        </li>
    </ul>
    <ul>
        <li v-for="(item,index) in friends" :key="index">
            {{item.name}}--{{item.age}}--{{item.sex}}
        </li>
    </ul>
    <ul>
        <li v-for="(item,index) in hobby" :key="index">
            {{item}}
        </li>
    </ul>
</div>
</body>
</html>
<script src="index.js"></script>
